@charset "utf-8";
.web{
	.carousel{
		.carousel-inner{
			img{
				width: 100%;
			}
		}
	}
	.hot_bigbox{
		padding-bottom: 30px;
		.hot_box{
			background-image: url(../img/游戏2.png);
			background-repeat: no-repeat;
			background-position: bottom left;
			.SQ{
				width: 40px;
				height: 120px;
				background-color: #e14738;
				display: flex;
				text-align: center;
				align-items: center;
				position: relative;
				// top:-8%;
				span{
					font-size: 21px;
					color: white;
				}
			&::before{
				content: "";
				width: 0px;
				height: 0px;
				border-top:20px solid transparent;
				border-right:20px solid transparent;
				border-left:  20px solid transparent;
				border-bottom:20px solid  white;
				position: absolute;
				bottom: -1%;
				}
			}

			.hot_right{
				.top_word{
					text-align: right;
					h2{
						font-size: 30px;
					}
					p{
						font-size: 12px;
						color:#898989;
					}
				}
				.photobox{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.smallbox{
						border-radius: 5px;
						width: 300px;
						height: 130px;
						overflow: hidden;
						margin-bottom: 10px;
						img{
							width: 100%;
						}
					}
				}
			}
		}
	}
	.host_bigbox{
		padding: 30px 0;
		.host_box{
			background-image: url(../img/游戏3.png);
			background-repeat: no-repeat;
			background-position: bottom  right; 
			background-size: 30%;
			.host_left{
				.top_word{
					h2{
						font-size: 30px;
					}
					p{
						font-size: 12px;
						color: #898989;
					}
				}
				.photobox{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.smallbox{
						border-radius: 5px;
						width: 300px;
						height: 130px;
						overflow: hidden;
						margin-bottom: 10px;
						img{
							width: 100%;
						}
					}
				}
			}
		}
	}
	.case_bigbox{
		.case_box{

			.case_middle{
				.word{
					margin-bottom: 40px;
					h2{
						font-size: 36px;
					}
				}
				.list_bigbox{
					display: flex;
					justify-content: space-between;
					text-align: center;
					flex-wrap: wrap;
				
				.list_box{
					position: relative;
					.photo_box{
						width: 305px;
						height: 135px;
						border-radius: 10px;
						overflow: hidden;
						&:hover~.game_introduce
						{
							display: block;
							}
						img{
							width: 100%;
						}
					}
					.text_box{
						
						margin: 10px 0 20px;
						p{
							font-size: 14px;
							color: #2a2a2a;
							}
						}
					
					.game_introduce{
						display: none;
						position: absolute;
						top: 0%;
						text-align:justify;
						padding: 10px;
						width: 305px;
						height: 135px;
						border-radius: 10px;
						background-color: black;
						opacity: 0.6;
						p{
							font-size: 12px;
							color: white;
							}
						}
					}

				}
			}
		}
	}
// 大盒
}


@media screen and (min-width:992px) and (max-width:1200px){
	.web{
		.hot_bigbox{
			
			.hot_box{
				background-position: bottom 15% left;
				background-size: 50%;
				.hot_right{
				.top_word{
					h2{
						font-size: 40px;
					}
					p{
						font-size: 18px;
					}
				}
				.photobox{
					display: flex;
					justify-content: flex-end;
					}
				}
			}
		}
		.host_bigbox{
			
			.host_box{
				background-position: bottom right;
				background-size: 50%;
				.host_left{
				.top_word{
					h2{
						font-size: 40px;
					}
					p{
						font-size: 18px;
					}
				}
				.photobox{
					display: flex;
					justify-content: flex-start;
					}
				}
			}
		}
	.case_bigbox{
		.case_box{

			.case_middle{
				.word{
					margin-bottom: 40px;
					h2{
						font-size: 36px;
					}
				}
				.list_bigbox{
					display: flex;
					justify-content: space-around;
					text-align: center;
					flex-wrap: wrap;
				
				.list_box{
					position: relative;
					.photo_box{
						width: 305px;
						height: 135px;
						border-radius: 10px;
						overflow: hidden;
						&:hover~.game_introduce
						{
							display: block;
							}
						img{
							width: 100%;
						}
					}
					.text_box{
						
						margin: 10px 0 20px;
						p{
							font-size: 20px;
							color: #2a2a2a;
							}
						}
					
					.game_introduce{
						display: none;
						position: absolute;
						top: 0%;
						text-align:justify;
						padding: 10px;
						width: 305px;
						height: 135px;
						border-radius: 10px;
						background-color: black;
						opacity: 0.6;
						p{
							font-size: 12px;
							color: white;
							}
						}
					}

				}
			}
		}
	}
	}
}



@media screen and (min-width:768px) and (max-width:991px){
	.web{
		.hot_bigbox{
			
			.hot_box{
				background-image: none;
				.hot_right{
				.top_word{
					padding: 0 10px;
					h2{
						font-size: 50px;
					}
					p{
						font-size: 24px;
					}
				}
				.photobox{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.smallbox{
						border-radius: 5px;
						width: 350px;
						height: 140px;
						overflow: hidden;
						margin-bottom: 20px;
						img{
							width: 100%;
							}
						}
					}
				}
			}
		}
	
	.host_bigbox{
		.host_box{
			background-image: none;
			.host_left{
			.top_word{
				padding: 0 20px;
				h2{
					font-size: 50px;
				}
				p{
					font-size: 24px;
				}
			}
			.photobox{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.smallbox{
					border-radius: 5px;
					width: 350px;
					height: 140px;
					overflow: hidden;
					margin-bottom: 20px;
					img{
						width: 100%;
						}
					}
				}
			}
		}
	}
	.case_bigbox{
		.case_box{
	
			.case_middle{
				.word{
					margin-bottom: 40px;
					h2{
						font-size: 50px;
					}
				}
				.list_bigbox{
					display: flex;
					justify-content: space-around;
					text-align: center;
					flex-wrap: wrap;
				
				.list_box{
					position: relative;
					.photo_box{
						width: 305px;
						height: 135px;
						border-radius: 10px;
						overflow: hidden;
						&:hover~.game_introduce
						{
							display: block;
							}
						img{
							width: 100%;
						}
					}
					.text_box{
						
						margin: 10px 0 20px;
						p{
							font-size: 20px;
							color: #2a2a2a;
							}
						}
					
					.game_introduce{
						display: none;
						position: absolute;
						top: 0%;
						text-align:justify;
						padding: 10px;
						width: 305px;
						height: 135px;
						border-radius: 10px;
						background-color: black;
						opacity: 0.6;
						p{
							font-size: 12px;
							color: white;
							}
						}
					}
	
				}
			}
		}
	}
	}
}


@media screen and (max-width:767px){
	.web{
		.hot_bigbox{
			
			.hot_box{
				background-image: none;
				.hot_right{
				.top_word{
					
					h2{
						font-size: 50px;
					}
					p{
						font-size: 24px;
					}
				}
				.photobox{
					display: flex;
					justify-content: space-around;
					}
				}
			}
		}
		.host_bigbox{
			.host_box{
				background-image: none;
				.host_left{
				.top_word{
					
					h2{
						font-size: 50px;
					}
					p{
						font-size: 24px;
					}
				}
				.photobox{
					display: flex;
					justify-content: space-around;
					}
				}
			}
		}
	.case_bigbox{
		.case_box{
	
			.case_middle{
				.word{
					margin-bottom: 40px;
					h2{
						font-size: 50px;
					}
				}
				.list_bigbox{
					display: flex;
					justify-content: space-around;
					text-align: center;
					flex-wrap: wrap;
				
				.list_box{
					position: relative;
					.photo_box{
						width: 305px;
						height: 135px;
						border-radius: 10px;
						overflow: hidden;
						&:hover~.game_introduce
						{
							display: block;
							}
						img{
							width: 100%;

						}
					}
					.text_box{
						
						margin: 10px 0 20px;
						p{
							font-size: 20px;
							color: #2a2a2a;
							}
						}
					
					.game_introduce{
						display: none;
						position: absolute;
						top: 0%;
						text-align:justify;
						padding: 10px;
						width: 305px;
						height: 135px;
						border-radius: 10px;
						background-color: black;
						opacity: 0.6;
						p{
							font-size: 12px;
							color: white;
							}
						}
					}
	
				}
			}
		}
	}
	}
}